<template>
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <!-- 一般性的list底部弹出框 -->
    <view class="popup-content">
      <view class="popup-header">
        <view class="popup-header-left">
          <text class="btn-cancel" @click="close">取消</text>
        </view>
        <view class="popup-header-center">{{ title }}</view>
        <view class="popup-header-right">
          <text class="btn-confirm" @click="confirmClick">确定</text>
        </view>
      </view>
      <scroll-view class="popup-body" scroll-y>
        <view
          v-for="(item, index) in options"
          :key="index + item.value"
          class="list-item"
          :class="{ active: isSelected(item) }"
          @click="select(item)"
        >
          <uni-icons
            v-if="!isSelected(item)"
            type="circle"
            size="30"
          ></uni-icons>
          <uni-icons
            v-else
            type="checkbox-filled"
            size="30"
            color="#007aff"
          ></uni-icons>

          <text
            class="list-text"
            :class="{
              active: isSelected(item),
            }"
            >{{ item.showname }}</text
          >
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '选择',
    },
    //提交的字段
    submitKey: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      default: () => [],
    },
    selectValue: {
      type: [String, Number, null],
      default: null,
    },
  },
  data() {
    return {
      selectedArr: [], // 选中的数据
      selectedValueArr: [], // 选中的value组合
    };
  },
  created() {
    if (this.selectValue) {
      this.selectedValueArr = this.selectValue.split(',');
      this.selectedArr = this.options.filter((item) =>
        this.selectedValueArr.includes(item.value)
      );
    }
  },
  methods: {
    open() {
      this.$refs.popup.open('bottom');
    },
    close() {
      this.$refs.popup.close();
    },
    select(item) {
      if (this.isSelected(item)) {
        this.selectedArr = this.selectedArr.filter((value) => value !== item);
        this.selectedValueArr = this.selectedValueArr.filter(
          (value) => value !== item.value
        );
      } else {
        this.selectedArr.push(item);
        this.selectedValueArr.push(item.value);
      }
    },
    confirmClick() {
      this.$emit('confirm', this.selectedArr, this.submitKey);
      this.close();
    },
    isSelected(item) {
      return this.selectedValueArr.includes(item.value);
    },
  },
};
</script>

<style lang="scss" scoped>
> .popup-content {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx 10rpx 15rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 24rpx;
  font-weight: bold;
}

.popup-body {
  max-height: 60vh;
}

.popup-item {
  padding: 10rpx 20rpx;
  border-bottom: 1rpx solid #eee;
}
.popup-item.active {
  color: #f00;
}

.list-item {
  display: flex;
  align-items: center;
  padding: 10rpx 10rpx;
  border-top: 1rpx solid #e5e5e5;

  .list-radio {
  }
  .list-checkbox {
  }
  .list-text {
    flex: 1;
    padding-left: 4rpx;
    &.active {
      color: #007aff;
    }
  }
}
</style>
